<!--
 * @FilePath     : /study_code/layui/14-1.html
 * @Description  : layout 组件布局用（静态类名）
 * @Date         : 2025-04-10 11:38:50
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-10 11:39:58
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
          <!-- 移动端显示 -->
          <li
            class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
            lay-header-event="menuLeft"
          >
            <i class="layui-icon layui-icon-spread-left"></i>
          </li>
          <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
          <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
          <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
          <li class="layui-nav-item">
            <a href="javascript:;">nav groups</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;">menu 11</a></dd>
              <dd><a href="javascript:;">menu 22</a></dd>
              <dd><a href="javascript:;">menu 33</a></dd>
            </dl>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
            <a href="javascript:;">
              <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img" />
              tester
            </a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;">Your Profile</a></dd>
              <dd><a href="javascript:;">Settings</a></dd>
              <dd><a href="javascript:;">Sign out</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
            <a href="javascript:;">
              <i class="layui-icon layui-icon-more-vertical"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
          <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;">menu group 1</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">menu 1</a></dd>
                <dd><a href="javascript:;">menu 2</a></dd>
                <dd><a href="javascript:;">menu 3</a></dd>
                <dd><a href="javascript:;">the links</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">menu group 2</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">list 1</a></dd>
                <dd><a href="javascript:;">list 2</a></dd>
                <dd><a href="javascript:;">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
            <li class="layui-nav-item"><a href="javascript:;">the links</a></li>
          </ul>
        </div>
      </div>
      <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px">
          <blockquote class="layui-elem-quote layui-text">Layui 框体布局内容主体区域</blockquote>
          <div class="layui-card layui-panel">
            <div class="layui-card-header">下面是充数内容，为的是出现滚动条</div>
            <div class="layui-card-body">
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              充数内容
              <br />
              你还真滑到了底部呀
            </div>
          </div>
          <br />
          <br />
        </div>
      </div>
      <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
      </div>
    </div>

    <script src="/layui/dist/layui.js"></script>
    <script>
      //JS
      layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
        var layer = layui.layer
        var util = layui.util
        var $ = layui.$

        //头部事件
        util.event('lay-header-event', {
          menuLeft: function (othis) {
            // 左侧菜单事件
            layer.msg('展开左侧菜单的操作', { icon: 0 })
          },
          menuRight: function () {
            // 右侧菜单事件
            layer.open({
              type: 1,
              title: '更多',
              content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
              area: ['260px', '100%'],
              offset: 'rt', // 右上角
              anim: 'slideLeft', // 从右侧抽屉滑出
              shadeClose: true,
              scrollbar: false,
            })
          },
        })
      })
    </script>
  </body>
</html>
